<!-- adSwipe 商品轮播图 -->
<template>
  <swiper
    indicator-color="rgba(255,255,255,.36)"
    indicator-active-color="#23E6D8"
    indicator-dots="true"
    :autoplay="!!autoplay"
    :duration="500"
    :interval="autoplay"
    class="goodsSwipe"
  >
    <swiper-item v-for="(item, index) in imgList" :key="index">
      <zm-image
        :lazy-load="false"
        custom-class="goodsSwipe-img"
        :src="item.imageUrl"
      />
    </swiper-item>
    <!-- <view class="custom-indicator" slot="indicator"
      >{{ current + 1 }}/{{ imgList.length }}</view
    > -->
  </swiper>
</template>

<script>
  import ZmImage from '@/commons/ZmImage/index.vue'
  export default {
    name: 'GoodSwipe',
    components: { ZmImage },
    props: {
      imgList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        current: 0,
        autoplay: 3000
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {},
      onChange(index) {
        this.current = index
      }
    }
  }
</script>
<style lang="scss" scoped>
  .goodsSwipe {
    width: 100%;
    height: 750rpx;
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      color: #fff;
      font-size: 12px;
      background: rgba(34, 34, 34, 0.6);
      border-radius: 4rpx;
    }
  }

  .goodsSwipe-img {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>
